<!-- 出/入栏 -->
<template>
	<border cardTitle="体重体脂">
		<Chart :optionData="option_column" style="height: 100%"></Chart>
	</border>
</template>
<script>
	import border from '../border.vue';
	import StatisticsMixins from '../../StatisticsMixins';
	import {
		bigScreenApi
	} from '@/api/index';
	import * as echarts from 'echarts';
	import {
		getRandom
	} from '@/utils/base.js'
	export default {
		components: {
			border
		},
		mixins: [StatisticsMixins],
		data() {
			return {
				option_column: {
					tooltip: {
						position: function(point, params, dom, rect, size) {
							return [point[1], 0];
						},
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0,
											color: 'rgba(0, 255, 233,0)'
										},
										{
											offset: 0.5,
											color: 'rgba(255, 255, 255,1)'
										},
										{
											offset: 1,
											color: 'rgba(0, 255, 233,0)'
										}
									],
									global: false
								}
							}
						}
					},
					grid: {
						top: '20%',
						left: '10%',
						right: '10%',
						bottom: '15%'
						// containLabel: true
					},
					legend: {
						show: false,
						type: 'scroll',
						top: 'top',
						right: 20,
						icon: 'rect',
						itemGap: 20,
						padding: [20, 20],
						itemWidth: 12,
						itemHeight: 12,
						textStyle: {
							fontSize: 12,
							color: '#fff'
						},
						itemStyle: {
							borderWidth: 0
						}
					},
					xAxis: [{
						type: 'category',
						axisLine: {
							show: true
						},
						splitArea: {
							// show: true,
							color: '#f00',
							lineStyle: {
								color: '#f00'
							}
						},
						axisLabel: {
							color: '#fff'
						},
						splitLine: {
							show: false
						},
						boundaryGap: false,
						data: []
					}],

					yAxis: [{
						type: 'value',
						min: 0,
						// max: 140,
						splitNumber: 4,
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: 'rgba(255,255,255,0.2)'
							}
						},
						axisLine: {
							show: false
						},
						axisLabel: {
							show: true,
							margin: 10,
							textStyle: {
								color: 'rgba(255,255,255,0.6)'
							}
						},
						axisTick: {
							show: false
						}
					}],
					series: [{
							name: '体重',
							type: 'line',
							symbol: 'circle',
							symbolSize: 6,
							lineStyle: {
								normal: {
									color: '#268AFF'
								}
							},
							label: {
								show: false
							},
							itemStyle: {
								color: '#268AFF',
								borderWidth: 0
							},
							tooltip: {
								show: true
							},
							areaStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
												offset: 0,
												color: 'rgba(30, 214, 255, .4)'
											},
											{
												offset: 1,
												color: 'rgba(30,214,255,0.1)'
											}
										],
										false
									),
									shadowColor: 'rgba(30, 214, 255, .9)',
									shadowBlur: 20
								}
							},
							data: []
						},


					]
				}
			};
		},
		props: {
			deptId: {
				type: [String, Number],
				default: 0,
				option_column: {}
			}
		},
		watch: {
			deptId: {
				handler(newV, oldV) {
					this.getInfo();
				},
				immediate: true
			}
		},
		computed: {},

		created() {
			this.getInfo();
		},
		methods: {
			getInfo() {
				// this.$postAction(bigScreenApi.lpwMonthCount + '?deptId=' + this.deptId).then(res => {
				// 	if (res && res.code == 1) {
				// 		let cowData = res.data;
				// 		console.log(cowData);
				// 		let indata = [],
				// 			outdata = [],
				// 			monthdata = [],
				// 			diedata = [];
				// 		cowData.forEach(item => {
				// 			indata.push(item.lairageCount);
				// 			outdata.push(item.publishCount);
				// 			diedata.push(item.weedOutCount);
				// 			// let sub = item.month.split('-');
				// 			monthdata.push(item.month);
				// 		});
				// 		this.option_column.xAxis[0].data = monthdata;
				// 		this.option_column.series[0].data = indata;
				// 		this.option_column.series[1].data = outdata;
				// 		this.option_column.series[2].data = diedata;
				// 	}
				// });
				let cowData = [];
				for (var i = 0; i < 6; i++) {
					cowData.push({
						month: ((i + 11) % 12 == 0 ? 12 : (i + 11) % 12) + '月',
						lairageCount: getRandom(40, 45),
						publishCount: getRandom(30, 100),
						weedOutCount: getRandom(1, 20),
					})
				}
				console.log(cowData);
				let indata = [],
					outdata = [],
					monthdata = [],
					diedata = [];
				cowData.forEach(item => {
					indata.push(item.lairageCount);
					outdata.push(item.publishCount);
					diedata.push(item.weedOutCount);
					// let sub = item.month.split('-');
					monthdata.push(item.month);
				});
				this.option_column.xAxis[0].data = monthdata;
				this.option_column.series[0].data = indata;
				this.option_column.series[1].data = outdata;
				this.option_column.series[2].data = diedata;
			}
		}
	};
</script>

<style scoped lang="less"></style>